<!--
  评论编辑器组件
  提供评论输入功能，支持登录提示、字数限制和提交按钮
-->
<template>
  <div class="comment-editor">
    <header class="editor-header">
      <slot name="title">
        <h3 class="editor-title">发表评论</h3>
      </slot>
      <slot name="actions" />
    </header>
    <div v-if="showLoginPrompt" class="login-mask">
      <p class="login-text">登录后即可参与讨论</p>
      <button type="button" class="login-button" @click="$emit('login')">
        登录/注册
      </button>
    </div>
    <textarea
      v-model="innerValue"
      class="editor-textarea"
      :placeholder="placeholder"
      :maxlength="maxLength"
      :disabled="disabled || loading || showLoginPrompt"
    />
    <footer class="editor-footer">
      <span class="counter">{{ innerValue.length }}/{{ maxLength }}</span>
      <button
        type="button"
        class="submit-button"
        :disabled="disabled || loading || innerValue.trim().length === 0"
        @click="handleSubmit"
      >
        {{ loading ? '发布中...' : '发布评论' }}
      </button>
    </footer>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '分享你的观点或向作者提问...',
  },
  maxLength: {
    type: Number,
    default: 400,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  showLoginPrompt: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'submit', 'login'])

const innerValue = ref(props.modelValue)

watch(
  () => props.modelValue,
  (value) => {
    if (value !== innerValue.value) {
      innerValue.value = value
    }
  },
)

watch(innerValue, (value) => {
  emit('update:modelValue', value)
})

function handleSubmit() {
  if (props.showLoginPrompt) {
    emit('login')
    return
  }
  emit('submit')
}
</script>

<style scoped>
.comment-editor {
  border: 1px solid #ebeef5;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.login-mask {
  background: rgba(64, 158, 255, 0.08);
  border: 1px dashed rgba(64, 158, 255, 0.4);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.login-text {
  margin: 0;
  color: #409eff;
  font-weight: 500;
}

.login-button {
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: #409eff;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.login-button:hover {
  background: #337ecc;
}

.editor-textarea {
  min-height: 140px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.editor-textarea:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15);
}

.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.counter {
  font-size: 13px;
  color: #909399;
}

.submit-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: #409eff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.submit-button:not(:disabled):hover {
  background: #337ecc;
}
</style>

